<template>
    <div>
        <el-row :gutter="20">
            <el-col :xs="24" :sm="24" :lg="12" class="col-item">
                <el-card shadow="always">
                    <div slot="header">
                        <span><strong>CPU</strong></span>
                    </div>
                    <ul>
                        <li class="item">
                            <el-row>
                                <el-col :span="12"><strong>属性</strong></el-col>
                                <el-col :span="12"><strong>值</strong></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">核心数</el-col>
                                <el-col :span="12" v-text="data.cpu.cpuNum"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">用户使用率</el-col>
                                <el-col :span="12" v-text="data.cpu.used+'%'"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">系统使用率</el-col>
                                <el-col :span="12" v-text="data.cpu.sys+'%'"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="12">当前空闲率</el-col>
                                <el-col :span="12" v-text="data.cpu.free+'%'"/>
                            </el-row>
                        </li>
                    </ul>
                </el-card>
            </el-col>
            <el-col :xs="24" :sm="24" :lg="12" class="col-item">
                <el-card shadow="always">
                    <div slot="header">
                        <span><strong>内存</strong></span>
                    </div>
                    <ul>
                        <li class="item">
                            <el-row>
                                <el-col :span="8"><strong>属性</strong></el-col>
                                <el-col :span="8"><strong>内存</strong></el-col>
                                <el-col :span="8"><strong>JVM</strong></el-col>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">总内存</el-col>
                                <el-col :span="8" v-text="data.mem.total+'G'"/>
                                <el-col :span="8" v-text="data.jvm.total+'M'"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">已用内存</el-col>
                                <el-col :span="8" v-text="data.mem.used+'G'"/>
                                <el-col :span="8" v-text="data.jvm.used+'M'"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">剩余内存</el-col>
                                <el-col :span="8" v-text="data.mem.free+'G'"/>
                                <el-col :span="8" v-text="data.jvm.free+'M'"/>
                            </el-row>
                        </li>
                        <li class="item">
                            <el-row>
                                <el-col :span="8">使用率</el-col>
                                <el-col :span="8" v-text="data.mem.usage+'%'"/>
                                <el-col :span="8" v-text="data.jvm.usage+'%'"/>
                            </el-row>
                        </li>
                    </ul>
                </el-card>
            </el-col>
        </el-row>
        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>服务器信息</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="6">服务器名称</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.computerName"/>
                            <el-col :xs="12" :sm="12" :lg="6">操作系统</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.osName"/>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="6">服务器IP</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.computerIp"/>
                            <el-col :xs="12" :sm="12" :lg="6">系统架构</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.osArch"/>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>
        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>Java虚拟机信息</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="6">Java名称</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.name"/>
                            <el-col :xs="12" :sm="12" :lg="6">Java版本</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.version"/>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="6">启动时间</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.startTime"/>
                            <el-col :xs="12" :sm="12" :lg="6">运行时长</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.runTime"/>
                        </el-row>
                    </li>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="6">安装路径</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.jvm.home"/>
                            <el-col :xs="12" :sm="12" :lg="6">项目路径</el-col>
                            <el-col :xs="12" :sm="12" :lg="6" v-text="data.sys.userDir"/>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>

        <el-row class="row">
            <el-card shadow="always">
                <div slot="header">
                    <span><strong>磁盘状态</strong></span>
                </div>
                <ul>
                    <li class="item">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="5"><strong>盘符路径</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="3"><strong>文件系统</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="4"><strong>盘符类型</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="3"><strong>总大小</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="3"><strong>可用大小</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="3"><strong>已用大小</strong></el-col>
                            <el-col :xs="12" :sm="12" :lg="3"><strong>使用百分比</strong></el-col>
                        </el-row>
                    </li>

                    <li class="item" v-for="item in data.sysFiles" :key="item.dirName">
                        <el-row>
                            <el-col :xs="12" :sm="12" :lg="5" v-text="item.dirName"/>
                            <el-col :xs="12" :sm="12" :lg="3" v-text="item.sysTypeName?item.sysTypeName:'未知'"/>
                            <el-col :xs="12" :sm="12" :lg="4" v-text="item.typeName"/>
                            <el-col :xs="12" :sm="12" :lg="3" v-text="item.total"/>
                            <el-col :xs="12" :sm="12" :lg="3" v-text="item.free"/>
                            <el-col :xs="12" :sm="12" :lg="3" v-text="item.used"/>
                            <el-col :xs="12" :sm="12" :lg="3" v-text="item.usage+'%'"/>
                        </el-row>
                    </li>
                </ul>
            </el-card>
        </el-row>
    </div>
</template>
<script lang="ts">
  import {Component, Vue} from 'vue-property-decorator';
  import {getServerInfo} from '@/api/server';

  @Component
  export default class Server extends Vue {
    data: any = {
      cpu: {
        cpuNum: 0,
        total: 0,
        sys: 0,
        used: 0,
        wait: 0,
        free: 0
      },
      mem: {
        total: 0,
        used: 0,
        free: 0,
        usage: 0
      },
      jvm: {
        total: 0,
        max: 0,
        free: 0,
        version: '',
        home: '',
        name: '',
        used: 0,
        startTime: '',
        usage: 0,
        runTime: ''
      },
      sys: {
        computerName: '',
        computerIp: '',
        userDir: '',
        osName: '',
        osArch: ''
      },
      sysFiles: []
    };

    getData() {
      getServerInfo().then(response => {
        this.data = response.data;
      }).catch((e) => {
        console.log(e);
      });
    }

    activated() {
      this.getData();
    }
  }
</script>

<style scoped lang="scss">
    .col-item {
        margin-bottom: 20px;
    }

    .row {
        margin-bottom: 20px;
    }


    ul {
        margin: 0;
        padding: 0;
        list-style-type: none;
    }

    .item {
        color: #606266;
        font-size: 14px;
        padding: 7px 10px;
        border-bottom: 1px solid rgb(231, 234, 236);
    }
</style>

